<template>
  <div class="home">
    <!--<div id="img-wrap" v-show="show">-->
      <!--<img src="../../image/loading_more.gif" alt="">-->
    <!--</div>-->
    <head_top head_search="true"></head_top>
    <div class="ref_ok" :class="{'show3':popupVisible}">刷新成功</div>
    <mt-loadmore class="loadMore" :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" @top-status-change="handleTopChange" @bottom-status-change="handleBottomChange" ref="loadmore">
    <lun_bo></lun_bo>
    <div class="info-wrap">
      <div class="info">
        <div class="week_recommend">
          <div class="recommend_head">
            <span>每周推荐</span>
            <span @click="$router.push('/more')">更多</span>
          </div>
          <div class="recommend_wrap">
            <ul>
              <li v-for="item in 4" @click="$router.push('/shopDetail')">
                <div class="item_head">
                  <img class="img-responsive" src="../../image/head_02.png" alt="">
                </div>
                <div class="item_content">
                  <span>店铺: 我呀便当</span>
                  <span>活动: 满50减100</span>
                  <span>
                    <span>推荐星级:</span>
                    <span>
                      <img class="img-responsive recommend_star" src="../../image/star03.png" alt="" v-for="img in 4">
                    </span>
                  </span>
                </div>
                <div class="item_foot">
                  <div>美团专送</div>
                  <div>超时包赔</div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="guess_like">
          <div class="recommend_head">
            <span>猜你喜欢</span>
            <span>更多</span>
          </div>
          <div class="recommend_wrap">
            <ul>
              <li v-for="item in 4">
                <div class="item_head">
                  <img class="img-responsive" src="../../image/head_02.png" alt="">
                </div>
                <div class="item_content">
                  <span>店铺: 鑫橙便当</span>
                  <span>活动: 满70减100</span>
                  <span>
                    <span>推荐星级:</span>
                    <span>
                      <img class="img-responsive recommend_star" src="../../image/star03.png" alt="" v-for="img in 3">
                    </span>
                  </span>
                </div>
                <div class="item_foot">
                  <div>美团专送</div>
                  <div>超时包赔</div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      </div>
      <div slot="top" class="mint-loadmore-top">
        <span v-show="topStatus === 'pull'" :class="{ 'rotate': topStatus === 'pull' }">下拉刷新</span>
        <span v-show="topStatus === 'drop'" :class="{ 'rotate': topStatus === 'drop' }"><img src="../../image/loading1.gif" alt=""></span>
        <span v-show="topStatus === 'loading'"><img src="../../image/loading1.gif" alt=""></span>
      </div>
      <div slot="bottom" class="mint-loadmore-bottom">
        <span v-show="bottomStatus === 'pull'" :class="{ 'rotate': bottomStatus === 'pull' }">加载更多</span>
        <span v-show="bottomStatus === 'drop'" :class="{ 'rotate': bottomStatus === 'drop' }"><img src="../../image/loading1.gif" alt=""></span>
        <span v-show="bottomStatus === 'loading'"><img src="../../image/loading1.gif" alt=""></span>
      </div>
    </mt-loadmore>
    <div class="shade" :class="{ 'show2': getFaker }">
      <span><img src="../../image/loading1.gif" alt=""></span>
      <span>努力加载中...</span>
    </div>
    <transition name="slide" mode="out-in"><router-view class="info-contariner"></router-view></transition>
    </div>
</template>

<script>
import { Loadmore } from 'mint-ui'
import lun_bo from '../carousel'
import head_top from '../header'
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'home',
  data () {
    return {
      show: false,
      topStatus: '',
      bottomStatus: '',
      tog: false,
      popupVisible: false,
      allLoaded: false,
    }
  },
  components: {
    head_top,
    lun_bo
  },
  computed: mapGetters([
    'getFaker'
  ]),
  methods: {
    ...mapActions([
      'reqAxios',
    ]),
    loadTop() {
      var self = this;
      self.refresh();
      this.$refs.loadmore.onTopLoaded();
    },
    loadBottom() {
      var self = this;
      self.reqAxios();
//        if(this.lists === 20){
//          this.allLoaded = true;// 若数据已全部获取完毕
//        }
      this.$refs.loadmore.onBottomLoaded();
    },
    handleTopChange(status) {
      this.topStatus = status;
    },
    handleBottomChange(status) {
      this.bottomStatus = status;
    },
    reqAxios () {
//      this.$store.dispatch('reqAxios')
      console.log("加载成功")
    },
    refresh(){
      var self = this;
      self.popupVisible = true;
      self.$http.get('http://localhost:8080/static/goodsData.json')
        .then(function(res){
          setTimeout(function(){self.popupVisible = false;},1000)
        }).catch(function(err){
        console.log(err)
      })
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .home {
    margin-top: 50px;
    overflow-y: auto;
    margin-bottom: 40px;
    height: 100%;
  }
  .info-wrap {
    height: 100%;
  }
.recommend_head {
 display: flex;
  margin-bottom: 5px;
  padding: 5px 0;
  border-bottom: 1px dashed #2aaa6d;
}
.recommend_head > span:nth-child(1) {
 flex: 1;
 text-align: left;
  padding-left: 10px;
}
.recommend_head > span:nth-child(2) {
  flex: 1;
  text-align: right;
  padding-right: 10px;
}
.recommend_wrap ul {
  display: flex;
  flex-direction: column;
}
.recommend_wrap ul > li {
  display: flex;
  margin: 0;
  padding-left: 5px;
  align-items: center;
  position: relative;
  border-bottom: 3px solid #eeeeee;
}
.recommend_wrap ul > li .item_head {
  height: 70px;
  width: 70px;
}
.recommend_wrap ul > li .item_content {
  flex: 1;
  display: flex;
  flex-direction: column;
  text-align: left;
  margin-left: 10px;
}
.recommend_wrap ul > li .item_content .recommend_star {
  display: inline-block;
  width:10px;
  height: 10px;
  overflow: hidden;
}
.recommend_wrap ul > li .item_foot {
    position: absolute;
    right: 5px;
    width: 65px;
    color:white;
    border-radius: 3px;
    overflow: hidden;
}
.recommend_wrap ul > li .item_foot > div:nth-child(1){
  margin-bottom: 3px;
  background: #2aaa6d;
}
.recommend_wrap ul > li .item_foot > div:nth-child(2){
    background: purple;
}

  .shade {
    position: absolute;
    z-index: 999;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 100px;
    height: 100px;
    border-radius: 10px;
    background: rgba(0,0,0,.2);
  }
  .shade > span{
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
  }
  .ref_ok {
    position: absolute;
    top: -50px;
    z-index: 666;
    line-height: 50px;
    text-align: center;
    width: 100%;
    height: 50px;
    background: rgba(0,0,0,.6);
    color: white;
    transition: all .5s;
  }
  .show2{
    display: flex;
  }
  .show3{
    top: 0;
  }
</style>
